<template>
	<div class="header-container">
		<nav class="header-nav">
			<div class="logo" @click="goToHome">
				<!-- <img src="@/assets/logo.png" alt="Bohrium Apps Logo" class="logo-image" /> -->
				<span>药智云选——</span>
				<span>云端智能药物筛选平台</span>
			</div>
<div class="menu">
    <router-link :to="'/UseApp'" class="menu-item" :class="{ active: isActive('/') }">
        <i class="el-icon-plus"></i> 新建任务
    </router-link>
    <router-link :to="'/recent-tasks'" class="menu-item" :class="{ active: isActive('/recent-tasks') }">
        <i class="el-icon-s-grid"></i> 任务看板
    </router-link>
    <router-link :to="'/DDI'" class="menu-item" :class="{ active: isActive('/DDI') }">
        <i class="el-icon-s-help"></i> 组合用药副作用预测
    </router-link>
    <span @click="goToDocs" class="menu-item">
        <i class="el-icon-document"></i> 用户文档
    </span>
</div>

		</nav>
	</div>
</template>

<script>
export default {
	name: 'HeaderComponent',
	computed: {
		currentRoute() {
			return this.$route.path;
		}
	},
	methods: {
		goToDocs() {
			window.location.href = '/api/docs/';
		},
		isActive(path) {
			return this.currentRoute === path;
		},
		goToHome() {
			if (this.$route.path !== '/') {
				this.$router.push('/'); // 只有在当前路径不是 `/` 时才进行导航
			}
		}
	}
};
</script>

<style scoped>
.menu-item {
	cursor: pointer; /* 将光标样式改为小手 */
}
.header-container {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 5vh; /* 设置 header 高度为页面高度的 20% */
	z-index: 1000;
	box-sizing: border-box; /* 确保内边距和边框包含在宽度内 */
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px 20px;
	background-color: #ffffff;
	/* border-bottom: 1px solid #e0e0e0; */
}

.header-nav {
	display: flex;
	width: 100%;
	padding-left: 30px;
	padding-right: 30px;
	justify-content: space-between;
	align-items: center;
}
.logo {
	display: flex;
	align-items: center;
	font-weight: bold;
	cursor: pointer; /* 鼠标悬停时显示为手形指针 */
}
.logo-image {
	width: 40px;
	height: 40px;
	margin-right: 10px;
}
.menu {
	display: flex;
	gap: 20px;
}
.menu-item {
	text-decoration: none;
	color: #333;
	font-weight: bold;
}
.active {
	color: #409eff;
}
</style>
